@warning:#e6a23c;
@success:#67c23a;
@danger:#f56c6c;
@info:#909399;

@warningPlain:#f5dab1;
@successPlain:#c2e7b0;
@dangerPlain:#fbc4c4;
@infoPlain:#d3d4d6;

.ys-tag--dark {
    background-color: #409eff;
    color: #fff;
}
.ys-tag--dark.ys-tag--warning {
    background-color: @warning;
    border-color: @warning;
    color: #fff;
}
.ys-tag--dark.ys-tag--success {
    background-color: @success;
    border-color: @success;
    color: #fff;
}
.ys-tag--dark.ys-tag--danger {
    background-color: @danger;
    border-color: @danger;
    color: #fff;
}
.ys-tag--dark.ys-tag--info {
    background-color: @info;
    border-color: @info;
    color: #fff;
}


.ys-tag--plain {
    background-color: #fff;
    border-color: #b3d8ff;
    color: #409eff;
}
.ys-tag--plain.ys-tag--success {
    background-color: #fff;
    border-color: @successPlain;
    color: @success;
}
.ys-tag--plain.ys-tag--info {
    background-color: #fff;
    border-color: @infoPlain;
    color: @info;
}
.ys-tag--plain.ys-tag--danger {
    background-color: #fff;
    border-color: @dangerPlain;
    color: @danger;
}
.ys-tag--plain.ys-tag--warning {
    background-color: #fff;
    border-color: @warningPlain;
    color: @warning;
}